<template>
	<view class="detail" v-if="detail">
		<view class="header">
			<image class="thumb" :src="detail.image" mode="widthFix"></image>
			<view class="mask"
				:style="{backgroundImage: `linear-gradient(to bottom, transparent, ${detail.imageHue.replace('0x','#')+'ef'} 50%)`}">
				<view class="title">{{detail.title}}</view>
			</view>
		</view>

		<!-- 解析富文本 -->
		<rich-text class="body" :nodes="detail.body | parseHtml"></rich-text>


		<view class="section-card" v-if="detail.section"
			:style="{backgroundColor: detail.imageHue.replace('0x','#') + 'ef'}"
			@click="navToSections(detail.section.id)">
			<image class="rotate" :src="detail.section.thumbnail" mode=""></image>
			<view class="info">
				<view class="from">本文来自</view>
				<view class="name">{{detail.section.name}} · 合集</view>
			</view>
			<icon type="info" size="26" />
		</view>

		<view class="extra">
			<view class="" @click="navToBack">返</view>
			<view class="" @click="navToComment(detail.id)">评</view>
			<view class="">赞</view>
			<view class="">收</view>
			<view class="">分</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				detail: null
			};
		},
		onLoad(options) {
			uni.request({
				url: "https://apis.netstart.cn/zhihudaily/story/" + options.id,
				success: (res) => {
					this.detail = res.data.story
				}
			})
		},
		methods: {
			navToSections: function(sectionid) {
				uni.navigateTo({
					url: "../sections/sections?id=" + sectionid
				})
			},
			navToBack: function() {
				uni.navigateBack({})
			},
			navToComment: function(id) {
				uni.navigateTo({
					url: "../comments/comments?id=" + id
				})
			}
		},
		filters: {
			parseHtml: function(str) {

				return str.replaceAll('<figure>', "<div>").replaceAll('</figure>', "</div>").replaceAll('<figcaption>',
						"<div>")
					.replaceAll('</figcaption>', "</div>")
			}
		}
	}
</script>

<style lang="less">
	.detail {
		padding-bottom: 150rpx;

		.header {
			position: relative;

			.thumb {
				width: 750rpx;
				height: 750rpx;
			}

			.mask {
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 9;
				width: 690rpx;
				height: 250rpx;
				padding: 30rpx;
				color: white;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;

				.title {
					font-size: 36rpx;
					font-weight: 600;
				}
			}
		}

		.section-card {
			display: flex;
			margin: 30rpx;
			align-items: center;
			border-radius: 20rpx;
			overflow: hidden;
			padding-right: 20rpx;

			.rotate {
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
				transform-origin: left top;
				transform: rotate(10deg);
			}

			.info {
				flex: 1;
				color: white;
				margin-left: 20rpx;

				.from {
					color: #CCCCCC;
					font-size: 20rpx;
					line-height: 2em;
				}

				.name {}
			}
		}

		.extra {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #EEEEEE;
			width: 750rpx;
			height: 100rpx;
			padding: 0 50rpx;
			box-sizing: border-box;
		}
	}
</style>
